<template>
  <!-- 收款账单页面容器 -->
  <div class="payment-bills-container">
    <!-- 页面标题 -->
    <el-page-header
      title="返回订单管理"
      content="收款账单"
      @back="handleBack"
      class="page-header"
    />

    <!-- 搜索区域：包含订单搜索表单，允许用户根据多种条件筛选订单 -->
    <div class="search-container">
      <!-- 搜索表单卡片：使用Element Plus的卡片组件包装搜索表单 -->
      <el-card shadow="never" class="search-card">
        <!-- 表单容器：使用Element Plus的表单组件，支持内联布局 -->
        <el-form :inline="true" :model="searchForm" class="search-form" label-width="80px">
          <!-- 订单编号搜索项：允许用户通过订单编号精确查找订单 -->
          <el-form-item label="订单编号">
            <el-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" clearable @keyup.enter="handleSearch"
              class="search-input" />
          </el-form-item>

          <!-- 客户名称搜索项：允许用户通过客户名称模糊查找订单 -->
          <el-form-item label="客户名称">
            <el-input v-model="searchForm.customerName" placeholder="请输入客户名称" clearable @keyup.enter="handleSearch"
              class="search-input" />
          </el-form-item>

          <!-- 订单日期范围搜索项：允许用户通过日期范围筛选订单 -->
          <el-form-item label="订单日期">
            <el-date-picker v-model="searchForm.orderDateRange" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" clearable @change="handleSearch"
              class="date-range-picker">
            </el-date-picker>
          </el-form-item>

          <!-- 婴儿名称搜索项：允许用户通过婴儿名称模糊查找订单 -->
          <el-form-item label="婴儿名称">
            <el-input v-model="searchForm.babyName" placeholder="请输入婴儿名称" clearable @keyup.enter="handleSearch"
              class="search-input" />
          </el-form-item>

          <!-- 产品名称搜索项：允许用户通过产品名称模糊查找订单 -->
          <el-form-item label="产品名称">
            <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable @keyup.enter="handleSearch"
              class="search-input" />
          </el-form-item>

          <!-- 收款状态搜索项：允许用户通过收款状态筛选订单 -->
          <el-form-item label="收款状态">
            <el-select v-model="searchForm.isPaid" placeholder="请选择收款状态" clearable @change="handleSearch"
              class="search-select">
              <el-option label="已收款" :value="1" />
              <el-option label="未收款" :value="0" />
            </el-select>
          </el-form-item>

          <!-- 操作按钮组：包含搜索和重置按钮 -->
          <el-form-item class="button-group">
            <!-- 搜索按钮：触发订单搜索操作 -->
            <el-button type="primary" @click="handleSearch" class="search-button">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </el-button>
            <!-- 重置按钮：清空搜索条件并重新加载所有订单 -->
            <el-button @click="handleReset" class="reset-button">
              <el-icon>
                <Refresh />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 表格区域：展示订单列表数据 -->
    <el-card class="table-card">
      <!-- 表格头部：包含标题和操作按钮 -->
      <template #header>
        <div class="table-header">
          <!-- 表格标题 -->
          <span>已入库订单列表</span>
          <!-- 操作按钮组 -->
          <div>
            <!-- 显示选中行数 -->
            <el-tag v-if="selectedOrders.length > 0">已选择 {{ selectedOrders.length }} 项</el-tag>
            <!-- 导出Excel按钮：导出当前列表数据为Excel文件 -->
            <el-button type="success" @click="handleExportExcel">
              <el-icon>
                <Download />
              </el-icon>
              导出Excel
            </el-button>
            <!-- 批量标记为已收款按钮 -->
            <el-button type="success" @click="handleBatchMarkAsPaid" :disabled="selectedOrders.length === 0">
              <el-icon>
                <Check />
              </el-icon>
              批量标记为已收款
            </el-button>
            <!-- 订单列表打印按钮 -->
            <el-button type="primary" @click="handleOrderListPrint">
              <el-icon>
                <Printer />
              </el-icon>
              订单列表打印
            </el-button>
          </div>
        </div>
      </template>

      <!-- 订单数据表格：使用Element Plus的表格组件展示订单数据 -->
      <el-table border :data="orderList" :show-overflow-tooltip="true" v-loading="loading" class="order-table" @selection-change="handleSelectionChange">
        <!-- 选择列：用于选择行数据 -->
        <el-table-column type="selection" width="55" />
        <!-- 订单编号列：显示订单的唯一标识符 -->
        <el-table-column prop="order_number" label="订单编号" width="150" />
        <!-- 订单日期列：显示订单创建日期，使用格式化函数处理日期显示 -->
        <el-table-column prop="order_date" label="订单日期" width="110">
          <template #default="{ row }">
            {{ formatDate(row.order_date) }}
          </template>
        </el-table-column>
        <!-- 客户名称列：显示客户名称，支持从关联对象或直接属性获取 -->
        <el-table-column label="客户名称" min-width="200">
          <template #default="{ row }">
            {{ (row.customer && row.customer.customer_name) || row.customer_name || '-' }}
          </template>
        </el-table-column>
        <!-- 产品名称列：显示产品名称，支持从关联对象或直接属性获取 -->
        <el-table-column label="产品名称" min-width="150">
          <template #default="{ row }">
            {{ (row.product && row.product.product_name) || row.product_name || '-' }}
          </template>
        </el-table-column>
        <!-- 婴儿名称列：显示婴儿姓名 -->
        <el-table-column prop="baby_name" label="婴儿名称" width="120" />
        <!-- 数量列：显示订购产品数量 -->
        <el-table-column prop="quantity" label="数量" width="60" />
        <!-- 单价列：显示产品单价，添加价格列样式 -->
        <el-table-column prop="unit_price" label="单价" width="100" class-name="price-column">
          <template #default="{ row }">
            ¥{{ row.unit_price }}
          </template>
        </el-table-column>

        <!-- 订单金额列：显示订单总金额，添加价格列样式 -->
        <el-table-column prop="total_amount" label="订单金额" width="120" class-name="price-column">
          <template #default="{ row }">
            ¥{{ row.total_amount }}
          </template>
        </el-table-column>
        <!-- 订单状态列：显示订单状态，使用标签组件和颜色区分不同状态 -->
        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 收款状态列：显示收款状态 -->
        <el-table-column label="收款状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.is_paid ? 'success' : 'warning'">
              {{ row.is_paid ? '已收款' : '未收款' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作列：包含查看、标记为已收款等操作按钮 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <!-- 打印按钮：打印单个订单 -->
            <el-button type="primary" size="small" @click="handlePrintOrder(row)">
              打印
            </el-button>
            <!-- 查看按钮：打开订单详情对话框 -->
            <el-button type="info" size="small" @click="handleView(row)">
              查看
            </el-button>
            <!-- 标记为已收款按钮 -->
            <el-button v-if="!row.is_paid" type="success" size="small" @click="handleMarkAsPaid(row)">
              标记为已收款
            </el-button>
            <!-- 取消收款按钮 -->
            <el-button v-else type="warning" size="small" @click="handleCancelPayment(row)">
              取消收款
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件：支持订单列表的分页导航 -->
      <div class="pagination-container">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 40, 100]"
          @current-change="handlePageChange" @size-change="handleSizeChange" />
      </div>
    </el-card>

    <!-- 订单详情对话框：以模态框形式展示订单详细信息 -->
    <el-dialog v-model="detailDialogVisible" title="订单详情" width="700px" :close-on-click-modal="false">
      <!-- 详情内容区域：包含加载状态指示器 -->
      <div v-loading="detailLoading" class="detail-container">
        <!-- 订单详情描述列表：使用Element Plus的描述列表组件展示详细信息 -->
        <el-descriptions :column="2" border>
          <!-- 订单编号项：显示订单编号 -->
          <el-descriptions-item label="订单编号">
            {{ orderDetail.order_number || '-' }}
          </el-descriptions-item>
          <!-- 订单日期项：显示订单日期，使用格式化函数处理显示 -->
          <el-descriptions-item label="订单日期">
            {{ formatDate(orderDetail.order_date) || '-' }}
          </el-descriptions-item>
          <!-- 客户名称项：显示客户名称，支持从关联对象或直接属性获取 -->
          <el-descriptions-item label="客户名称">
            {{ (orderDetail.customer && orderDetail.customer.customer_name) || orderDetail.customer_name || '-' }}
          </el-descriptions-item>
          <!-- 产品名称项：显示产品名称，支持从关联对象或直接属性获取 -->
          <el-descriptions-item label="产品名称">
            {{ (orderDetail.product && orderDetail.product.product_name) || orderDetail.product_name || '-' }}
          </el-descriptions-item>
          <!-- 婴儿名称项：显示婴儿姓名 -->
          <el-descriptions-item label="婴儿名称">
            {{ orderDetail.baby_name || '-' }}
          </el-descriptions-item>
          <!-- 数量项：显示订购产品数量 -->
          <el-descriptions-item label="数量">
            {{ orderDetail.quantity || '-' }}
          </el-descriptions-item>
          <!-- 单价项：显示产品单价 -->
          <el-descriptions-item label="单价">
            ¥{{ orderDetail.unit_price || '0.00' }}
          </el-descriptions-item>
          <!-- 小计项：显示订单小计金额 -->
          <el-descriptions-item label="小计">
            ¥{{ orderDetail.subtotal || '0.00' }}
          </el-descriptions-item>
          <!-- 订单金额项：显示订单总金额 -->
          <el-descriptions-item label="订单金额">
            ¥{{ orderDetail.total_amount || '0.00' }}
          </el-descriptions-item>
          <!-- 订单状态项：显示订单状态，使用标签组件和颜色区分不同状态 -->
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusTagType(orderDetail.status)">
              {{ getStatusText(orderDetail.status) }}
            </el-tag>
          </el-descriptions-item>
          <!-- 收款状态项：显示收款状态 -->
          <el-descriptions-item label="收款状态">
            <el-tag :type="orderDetail.is_paid ? 'success' : 'warning'">
              {{ orderDetail.is_paid ? '已收款' : '未收款' }}
            </el-tag>
          </el-descriptions-item>
          <!-- 照片项：显示是否包含照片，使用标签组件显示有/无状态 -->
          <el-descriptions-item label="照片">
            <el-tag :type="orderDetail.photo ? 'success' : 'info'">
              {{ orderDetail.photo ? '有' : '无' }}
            </el-tag>
          </el-descriptions-item>
          <!-- 手脚印项：显示是否包含手脚印，使用标签组件显示有/无状态 -->
          <el-descriptions-item label="手脚印">
            <el-tag :type="orderDetail.hand_foot_print ? 'success' : 'info'">
              {{ orderDetail.hand_foot_print ? '有' : '无' }}
            </el-tag>
          </el-descriptions-item>
          <!-- 胎毛项：显示是否包含胎毛，使用标签组件显示有/无状态 -->
          <el-descriptions-item label="胎毛">
            <el-tag :type="orderDetail.baby_hair ? 'success' : 'info'">
              {{ orderDetail.baby_hair ? '有' : '无' }}
            </el-tag>
          </el-descriptions-item>
          <!-- 脐带项：显示是否包含脐带，使用标签组件显示有/无状态 -->
          <el-descriptions-item label="脐带">
            <el-tag :type="orderDetail.umbilical_cord ? 'success' : 'info'">
              {{ orderDetail.umbilical_cord ? '有' : '无' }}
            </el-tag>
          </el-descriptions-item>
          <!-- 快递公司项：显示快递公司名称 -->
          <el-descriptions-item label="快递公司">
            {{ orderDetail.express_company || '-' }}
          </el-descriptions-item>
          <!-- 快递单号项：显示快递单号 -->
          <el-descriptions-item label="快递单号">
            {{ orderDetail.express_number || '-' }}
          </el-descriptions-item>
          <!-- 订单备注项：显示订单备注信息，跨两列显示 -->
          <el-descriptions-item label="订单备注" :span="2">
            {{ orderDetail.notes || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 对话框底部操作区域：包含关闭按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/**
 * 收款账单页面组件
 * 负责展示、搜索已入库的订单信息，并支持标记为已收款等操作
 *
 * 功能概述：
 * 1. 订单列表展示：分页显示已入库的订单信息，支持多种筛选条件
 * 2. 订单搜索功能：支持按订单编号、客户名称、日期范围、婴儿名称、产品名称搜索
 * 3. 订单详情查看：以模态框形式展示订单详细信息
 * 4. 标记为已收款：支持将订单标记为已收款状态
 * 5. 批量标记为已收款：支持批量操作
 * 6. 订单打印功能：使用hiprint插件实现订单列表打印
 */

// 从Vue核心库中导入必要的函数
// ref: 创建响应式引用，用于包装基本类型数据
// reactive: 创建响应式对象，用于包装对象类型数据
// onMounted: 组件挂载时执行的生命周期钩子函数
// computed: 创建计算属性，用于声明式地描述响应式数据的计算逻辑
import { ref, reactive, onMounted } from 'vue'

// 从Element Plus UI库中导入消息和对话框组件
// ElMessage: 消息提示组件，用于显示操作结果提示
// ElMessageBox: 对话框组件，用于显示确认对话框
import { ElMessage, ElMessageBox } from 'element-plus'

// 导入订单列表打印模板工具类
import OrderListPrintTemplate from '@/utils/OrderListPrintTemplate'
// 导入单个订单打印模板工具类
import OrderPrintTemplate from '@/utils/OrderPrintTemplate'

// 创建打印模板实例
const orderListPrintTemplate = new OrderListPrintTemplate()
const orderPrintTemplate = new OrderPrintTemplate()

// 从销售订单API模块中导入相关函数
// getOrderList: 获取订单列表，支持分页和搜索
// updateOrder: 更新订单信息
import {
  getOrderList,
  updateOrder
} from '@/api/SalesOrders'

// 导入订单状态配置
// 包含订单状态的标签文本、标签类型和状态值映射关系
import orderStatusConfig from '@/utils/orderStatusConfig'

// 从Element Plus UI库中导入图标组件
// Search: 搜索图标
// Refresh: 刷新图标
// Printer: 打印图标
// Check: 勾选图标
// Download: 下载图标
import { Search, Refresh, Printer, Check, Download } from '@element-plus/icons-vue'

// 获取路由实例，用于页面跳转
import { useRouter } from 'vue-router'
const router = useRouter()

// 响应式数据定义
const orderList = ref([])           // 订单列表数据，存储从API获取的订单数组
const loading = ref(false)          // 列表加载状态，控制表格加载指示器显示
const total = ref(0)                // 总数据条数，用于分页组件显示总记录数
const currentPage = ref(1)          // 当前页码，控制分页组件当前页
const pageSize = ref(10)            // 每页条数，控制分页组件每页显示记录数
const selectedOrders = ref([])      // 选中的订单列表

// 搜索表单数据，使用reactive创建响应式对象
const searchForm = reactive({
  orderNumber: '',      // 订单编号搜索条件
  customerName: '',     // 客户名称搜索条件
  orderDateRange: [],   // 订单日期范围搜索条件
  babyName: '',         // 婴儿名称搜索条件
  productName: '',      // 产品名称搜索条件
  isPaid: null          // 收款状态搜索条件
})

// 详情对话框相关状态
const detailDialogVisible = ref(false)  // 详情对话框显示状态，控制对话框显示/隐藏
const detailLoading = ref(false)        // 详情加载状态，控制详情对话框加载指示器显示
const orderDetail = ref({})             // 订单详情数据，存储当前查看的订单详细信息

/**
 * 处理返回按钮点击
 */
const handleBack = () => {
  router.push('/orders')
}

/**
 * 处理表格行选择变化
 * @param {Array} selection - 选中的行数据数组
 */
const handleSelectionChange = (selection) => {
  selectedOrders.value = selection
}

/**
 * 格式化日期显示
 * @param {string} date - 日期字符串
 * @returns {string} 格式化后的日期
 *
 * 将日期字符串格式化为本地日期格式
 * 如果传入的日期为空，则返回默认值'-'
 * 否则创建Date对象并格式化为中文本地日期字符串
 */
const formatDate = (date) => {
  // 如果日期为空，返回默认值
  if (!date) return '-'
  // 创建Date对象并格式化为本地日期字符串
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN')
}

/**
 * 获取订单状态文本
 * @param {number} status - 订单状态代码
 * @returns {string} 状态文本
 *
 * 根据状态代码获取对应的显示文本
 * 通过调用orderStatusConfig模块的getStatusLabel方法获取状态文本
 */
const getStatusText = (status) => {
  return orderStatusConfig.getStatusLabel(status)
}

/**
 * 获取订单状态标签类型
 * @param {number} status - 订单状态代码
 * @returns {string} 标签类型
 *
 * 根据状态代码获取Element UI标签类型
 * 通过调用orderStatusConfig模块的getStatusTagType方法获取标签类型
 * 不同的状态使用不同的标签颜色进行区分
 */
const getStatusTagType = (status) => {
  return orderStatusConfig.getStatusTagType(status)
}

/**
 * 获取订单列表数据
 *
 * 从API获取订单列表数据并更新页面状态
 * 支持分页和多种搜索条件
 * 处理API响应数据并更新组件的响应式数据
 */
const getOrderListData = async () => {
  try {
    // 设置加载状态为true，显示加载指示器
    loading.value = true

    // 处理日期范围参数，将日期范围数组转换为开始日期和结束日期字符串
    let startDate = '';
    let endDate = '';
    if (searchForm.orderDateRange && searchForm.orderDateRange.length === 2) {
      startDate = searchForm.orderDateRange[0];
      endDate = searchForm.orderDateRange[1];
    }

    // 构建分页参数对象，包含分页信息和搜索条件
    const params = {
      page: currentPage.value,        // 当前页码
      pageSize: pageSize.value,       // 每页条数
      // 只显示已入库的订单（状态为3）
      status: 3,
      // 添加搜索参数
      orderNumber: searchForm.orderNumber,      // 订单编号搜索条件
      customerName: searchForm.customerName,    // 客户名称搜索条件
      startDate: startDate,                     // 开始日期搜索条件
      endDate: endDate,                         // 结束日期搜索条件
      babyName: searchForm.babyName,            // 婴儿名称搜索条件
      productName: searchForm.productName,      // 产品名称搜索条件
      isPaid: searchForm.isPaid                 // 收款状态搜索条件
    }

    // 调用API获取订单列表
    const res = await getOrderList(params)

    // 根据已知的API响应结构直接处理数据
    if (res.data && Array.isArray(res.data.orders)) {
      // 设置订单列表数据
      orderList.value = res.data.orders

      // 更新分页信息
      if (res.data.pagination) {
        total.value = res.data.pagination.totalCount || 0           // 总记录数
        currentPage.value = res.data.pagination.currentPage || 1    // 当前页码
        pageSize.value = res.data.pagination.pageSize || 20         // 每页条数
      }
    } else {
      // 如果数据结构不符合预期，设置为空数组
      orderList.value = []
      total.value = 0
    }
  } catch (error) {
    // 错误处理：记录错误日志并显示错误提示
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败，请稍后重试！')
    // 出错时重置数据
    orderList.value = []
    total.value = 0
  } finally {
    // 无论成功或失败，最后都将加载状态设置为false
    loading.value = false
  }
}

/**
 * 页码改变事件处理函数
 * @param {number} page - 新的页码
 *
 * 当用户切换页码时，重新加载对应页的数据
 * 更新当前页码并调用获取订单列表函数
 */
const handlePageChange = (page) => {
  // 更新当前页码
  currentPage.value = page
  // 重新获取订单列表数据
  getOrderListData()
}

/**
 * 每页条数改变事件处理函数
 * @param {number} size - 新的每页条数
 *
 * 当用户更改每页显示条数时，重新加载数据
 * 更新每页条数，重置到第一页并重新获取数据
 */
const handleSizeChange = (size) => {
  // 更新每页条数
  pageSize.value = size
  // 重置到第一页
  currentPage.value = 1
  // 重新获取订单列表数据
  getOrderListData()
}

/**
 * 搜索按钮点击事件处理函数
 *
 * 执行订单搜索操作
 * 重置到第一页并获取订单列表数据
 */
const handleSearch = () => {
  // 记录搜索操作日志
  console.log('执行搜索:', searchForm)
  // 根据分页功能实现规范：搜索操作时重置到第一页
  currentPage.value = 1
  // 获取订单列表数据
  getOrderListData()
}

/**
 * 重置按钮点击事件处理函数
 *
 * 重置搜索条件并重新加载数据
 * 清空搜索表单并重置到第一页
 */
const handleReset = () => {
  // 记录重置操作日志
  console.log('重置搜索条件')
  // 清空搜索表单，使用Object.assign方法重置所有搜索条件
  Object.assign(searchForm, {
    orderNumber: '',
    customerName: '',
    orderDateRange: [],
    babyName: '',
    productName: '',
    isPaid: null
  })
  // 重置到第一页
  currentPage.value = 1
  // 重新获取订单列表数据
  getOrderListData()
}

/**
 * 查看订单详情
 * @param {Object} row - 订单数据行
 *
 * 显示订单详情对话框
 * 调用API获取订单详情并填充到详情对话框中
 */
const handleView = async (row) => {
  // 记录查看操作日志
  console.log('查看订单:', row)

  try {
    // 显示详情对话框
    detailDialogVisible.value = true
    // 设置详情加载状态为true，显示加载指示器
    detailLoading.value = true

    // 调用API获取订单详情
    const response = await getOrderList({
      orderId: row.order_id,
      page: 1,
      pageSize: 1
    })

    // 根据实际API响应结构调整数据赋值
    if (response.data && response.data.orders && response.data.orders.length > 0) {
      // 如果响应包含data字段，使用data字段的数据
      orderDetail.value = response.data.orders[0]
    } else {
      // 否则直接使用响应数据
      orderDetail.value = response
    }
  } catch (error) {
    // 错误处理：记录错误日志并显示错误提示
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败，请稍后重试！')

    // 如果API调用失败，使用列表中的数据作为后备方案
    orderDetail.value = row
  } finally {
    // 无论成功或失败，最后都将详情加载状态设置为false
    detailLoading.value = false
  }
}

/**
 * 标记订单为已收款
 * @param {Object} row - 订单数据行
 */
const handleMarkAsPaid = async (row) => {
  try {
    // 确认是否标记为已收款
    await ElMessageBox.confirm(
      `确定要将订单 "${row.order_number}" 标记为已收款吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 更新订单状态为已收款
    const updateData = {
      order_id: row.order_id,
      is_paid: 1 // 标记为已收款
    }

    await updateOrder(updateData)

    ElMessage.success('标记为已收款成功！')

    // 重新加载列表数据
    getOrderListData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('标记为已收款失败:', error)
      ElMessage.error('标记为已收款失败，请稍后重试！')
    }
  }
}

/**
 * 取消订单收款状态
 * @param {Object} row - 订单数据行
 */
const handleCancelPayment = async (row) => {
  try {
    // 确认是否取消收款
    await ElMessageBox.confirm(
      `确定要取消订单 "${row.order_number}" 的收款状态吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 更新订单状态为未收款
    const updateData = {
      order_id: row.order_id,
      is_paid: 0 // 标记为未收款
    }

    await updateOrder(updateData)

    ElMessage.success('取消收款状态成功！')

    // 重新加载列表数据
    getOrderListData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消收款状态失败:', error)
      ElMessage.error('取消收款状态失败，请稍后重试！')
    }
  }
}

/**
 * 批量标记为已收款
 */
const handleBatchMarkAsPaid = async () => {
  try {
    // 确认是否批量标记为已收款
    await ElMessageBox.confirm(
      `确定要将选中的 ${selectedOrders.value.length} 个订单标记为已收款吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 批量更新选中订单的收款状态
    const updatePromises = selectedOrders.value.map(order => {
      const updateData = {
        order_id: order.order_id,
        is_paid: 1 // 标记为已收款
      }
      return updateOrder(updateData)
    })

    await Promise.all(updatePromises)

    ElMessage.success('批量标记为已收款成功！')

    // 清空选中项
    selectedOrders.value = []

    // 重新加载列表数据
    getOrderListData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量标记为已收款失败:', error)
      ElMessage.error('批量标记为已收款失败，请稍后重试！')
    }
  }
}

/**
 * 导出订单列表为Excel文件
 */
const handleExportExcel = () => {
  try {
    // 动态导入xlsx库
    import('xlsx').then(XLSX => {
      // 创建工作簿
      const wb = XLSX.utils.book_new();

      // 处理导出数据，将订单数据转换为适合导出的格式
      const exportData = orderList.value.map(order => {
        return {
          '订单编号': order.order_number,
          '订单日期': formatDate(order.order_date),
          '客户名称': (order.customer && order.customer.customer_name) || order.customer_name || '-',
          '产品名称': (order.product && order.product.product_name) || order.product_name || '-',
          '婴儿名称': order.baby_name || '-',
          '数量': order.quantity || 0,
          '单价': `¥${order.unit_price || 0}`,
          '订单金额': `¥${order.total_amount || 0}`,
          '订单状态': getStatusText(order.status),
          '收款状态': order.is_paid ? '已收款' : '未收款',
          '照片': order.photo ? '有' : '无',
          '手脚印': order.hand_foot_print ? '有' : '无',
          '胎毛': order.baby_hair ? '有' : '无',
          '脐带': order.umbilical_cord ? '有' : '无',
          '快递公司': order.express_company || '-',
          '快递单号': order.express_number || '-',
          '订单备注': order.notes || '-'
        };
      });

      // 创建工作表
      const ws = XLSX.utils.json_to_sheet(exportData);

      // 设置列宽
      const colWidths = [
        { wch: 15 }, // 订单编号
        { wch: 12 }, // 订单日期
        { wch: 20 }, // 客户名称
        { wch: 15 }, // 产品名称
        { wch: 12 }, // 婴儿名称
        { wch: 8 },  // 数量
        { wch: 10 }, // 单价
        { wch: 12 }, // 订单金额
        { wch: 10 }, // 订单状态
        { wch: 10 }, // 收款状态
        { wch: 8 },  // 照片
        { wch: 8 },  // 手脚印
        { wch: 8 },  // 胎毛
        { wch: 8 },  // 脐带
        { wch: 15 }, // 快递公司
        { wch: 20 }, // 快递单号
        { wch: 25 }  // 订单备注
      ];
      ws['!cols'] = colWidths;

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, '收款账单');

      // 导出文件
      XLSX.writeFile(wb, `收款账单_${new Date().toLocaleDateString()}.xlsx`);

      ElMessage.success('导出Excel成功！');
    }).catch(error => {
      console.error('导出Excel失败:', error);
      ElMessage.error('导出Excel失败，请稍后重试！');
    });
  } catch (error) {
    console.error('导出Excel失败:', error);
    ElMessage.error('导出Excel失败，请稍后重试！');
  }
};

/**
 * 使用vue-plugin-hiprint插件实现订单列表打印功能
 * 创建打印模板并执行打印预览
 */
const handleOrderListPrint = () => {
  // 调用订单列表打印模板工具类的打印方法
  orderListPrintTemplate.print(orderList.value, formatDate)
}

/**
 * 打印单个订单
 * @param {Object} order - 订单数据
 */
const handlePrintOrder = (order) => {
  // 调用单个订单打印模板工具类的打印方法
  orderPrintTemplate.print(order)
}

// 组件挂载时获取订单列表数据
// 在组件初始化时加载必要的数据
onMounted(() => {
  // 获取订单列表数据（只显示已入库的订单）
  getOrderListData()
})
</script>

<style scoped>
/**
 * 收款账单页面样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 页面容器样式 */
.payment-bills-container {
  padding: 20px;
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 20px;
}

/* 搜索容器样式 */
.search-container {
  margin-bottom: 20px;
}

/* 搜索卡片样式 */
.search-card {
  border: 1px solid #e4e7ed;
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 0;
}

/* 搜索表单项样式 */
.search-form .el-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* 搜索输入框样式 */
.search-input {
  width: 150px;
}

/* 搜索选择框样式 */
.search-select {
  width: 150px;
}

/* 日期范围选择器样式 */
.date-range-picker {
  width: 220px;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 10px;
  margin-left: auto !important;
}

/* 搜索按钮样式 */
.search-button {
  white-space: nowrap;
}

/* 重置按钮样式 */
.reset-button {
  white-space: nowrap;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格头部样式 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 表格头部标题样式 */
.table-header span {
  font-size: 16px;
  font-weight: bold;
}

/* 表格头部按钮组样式 */
.table-header>div {
  display: flex;
  gap: 10px;
}

/* 订单数据表格 */
.order-table {
  width: 100%;
}

/* 分页容器样式 */
.pagination-container {
  text-align: right;
  margin-top: 20px;
}

/* 详情容器样式 */
.detail-container {
  min-height: 200px;
}

/* 对话框底部操作区域样式 */
.dialog-footer {
  text-align: right;
}

/* 价格列样式 */
.price-column {
  text-align: right;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .search-form .el-form-item {
    width: 100%;
  }

  .search-input,
  .date-range-picker {
    width: 100%;
  }

  .button-group {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }

  .table-header {
    flex-direction: column;
    align-items: stretch;
  }

  .table-header>div {
    justify-content: center;
  }
}
</style>
